<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>登录/注册</title>
		<script src="js/vue.js"></script>
		<script src="js/axios.min.js"></script>
		<script src="js/common.js"></script>
		<script src="js/elementui.js"></script>
		<link rel="stylesheet" href="css/index.css" />
		<script src="js/jquery3.5.1.js"></script>
		<script src="js/qrcode.js"></script>
		<link rel="stylesheet" href="css/login.css"/>
	</head>
	<body>
		<div id="app">
			<!--登录-->
			<div id="loginBox" class="loginOrRegist">
				<!--头部-->
				<div class="loginHead">
					<div class="loginTitle">登录后免费畅享高清视频</div>
					<div class="loginSubTitle">
						<ul>
							<li><i class="el-icon-chat-line-round"></i><span>点赞评论随便发</span></li>&nbsp;&nbsp;
							<li><i class="el-icon-user"></i><span>朋友视频一键览</span></li>&nbsp;&nbsp;
							<li><i class="el-icon-position"></i><span>有趣视频随心转</span></li>
						</ul>
					</div>
				</div>
				<!--关闭按钮-->
				<div class="loginExitButton" onclick="closeLogin()">
					<i class="el-icon-close"></i>
				</div>
				<!--tab-->
				<div class="loginTab">
					<div class="loginTab_submit">
						<ul>
							<li @click="showTab"  id="扫码登录"><span>扫码登录</span></li>&nbsp;&nbsp;
							<li @click="showTab"  id="验证码登录"><span>验证码登录</span></li>&nbsp;&nbsp;
							<li @click="showTab"  id="密码登录"><span>密码登录</span></li>
						</ul>
					</div>
					<!--二维码登录-->
					<div class="login_code" v-show="codeLogin">
						<div  class="login_code_img">
							<div id="code"></div>
						</div>
						<div class="login_code_hint">
							打开<span style="color:#FF1493;">微信</span>点击右上角扫一扫登录
						</div>
					</div>
					<!--验证码登录-->
					<div class="login_code" v-show="authCodeLogin">
						<!--电话-->
						<div class="login_normal_input">
							<input class="login-normal-input__code" size="3" autocomplete="off" type="text" value="+86"/>
							<span class="login-normal-input__icon"><i class="el-icon-arrow-down"></i></span>
							<input class="login-normal-input__input" type="number" v-model="telOne" id="phone" placeholder="手机号" />
						</div>
						<!--验证码-->
						<div class="login_normal_input">
							<input class="login-normal-input__input2" type="number" v-model="authCode" placeholder="请输入验证码"/>
							<button @click="sendCode" class="login-normal-input__btn">获取验证码</button>
							<button id="codetime" style="display: none;" aria-readonly="false" class="login-normal-input__btn">请在60秒内完成验证</button>
						</div>
						<!--提示消息-->
						<div class="loginMsg">
							手机号不能为空
						</div>
						<div class="login_befor_text">
							<span>登录或注册即代表同意</span>
							<a>用户协议</a>
							<span>和</span>
							<a>隐私政策</a>
						</div>
						<div class="loginBtn">
							<button class="loginBtn_refer" @click="register" >登录/注册</button>
						</div>
					</div>
					<!--密码登录-->
					<div class="login_code" v-show="pwdLogin">
						<!--电话-->
						<div class="login_normal_input">
							<input class="login-normal-input__code" size="3" autocomplete="off" type="text" value="+86"/>
							<span class="login-normal-input__icon"><i class="el-icon-arrow-down"></i></span>
							<input id="iphone" class="login-normal-input__input" type="number" v-model="telTwo"  placeholder="手机号"/>
						</div>
						<!--密码-->
						<div class="login_normal_input">
							<input class="login-normal-input__input2" v-model="pwdTwo" type="password" placeholder="请输入密码"/>
							<button class="login-normal-input__btn" style="color: #FF1493;">忘记密码</button>
						</div>
						<!--提示消息-->
						<div class="loginMsg">
							手机号不能为空
						</div>
						<div class="login_befor_text">
							<span>登录或注册即代表同意</span>
							<a href="#">用户协议</a>
							<span>和</span>
							<a href="#">隐私政策</a>
						</div>
						<div class="loginBtn">
							<button class="loginBtn_refer" @click="login">登录</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script>
		new Vue({
			el:"#app",
			data:{
				codeLogin:true,
				authCodeLogin:false,
				pwdLogin:false,
				telOne:'',
				telTwo:'',
				pwdTwo:'',
				authCode:'',
				codeNum:''
			},methods:{
				sendCode(){
					//发送验证码
					if(this.telOne==null||this.telOne==''){
						this.$message.warning('请输入手机号');
						return;
					}
					axios.post(API+"sendCode?phone="+this.telOne).then(res=>{
						console.log(res.data)
						this.codeNum=res.data.code;
						$("#codetime").css("display","block");
						let num=60;
						setInterval(function(){
							if(num==0){
								$("#codetime").css("display","none");
							}
							num--;
							$("#codetime").text("请在"+num+"秒内完成验证")
						},1000)
					})
				},
				register(){
					if(this.telOne.length!=11){
						this.$message.warning('请正确填写手机号！')
						return;
					}
					if((this.telOne==null||this.telOne=='')||(this.authCode==null||this.authCode=='')){
						return;
					}
					if(this.authCode===this.codeNum){
						axios.post(API+"register?phone="+this.telOne).then(res=>{
							console.log(res.data)
							if(res.data){
								this.$message.success('注册成功')
							}else{
								this.$message.error('注册失败')
							}
						})
					}
				},login(){
					if(this.telTwo.length!=11){
						this.$message.warning('请正确填写手机号！')
						return;
					}
					if((this.telTwo==null||this.telTwo=='')||(this.pwdTwo==null||this.pwdTwo=='')){
						return;
					}
					let userinfo={"phoneNum":this.telTwo,"password":this.pwdTwo}
					axios.post(API+"loginUser",userinfo).then(res=>{
						if(res.data!=''){
							userinfo=res.data;
							window.localStorage.setItem("userid",userinfo.userId)
							window.localStorage.setItem("useridPY",userinfo.userId)
							this.$message.success('登录成功')
							location.href="mine/mine.html"
						}else{
							this.$message.error('登录失败，用户名和密码错误')
						}
					})
				},
				showTab(){
					if(event.currentTarget.id=="扫码登录"){
						this.codeLogin=true
						this.authCodeLogin=false
						this.pwdLogin=false
					}else if(event.currentTarget.id=="验证码登录"){
						this.codeLogin=false
						this.authCodeLogin=true
						this.pwdLogin=false
					}else{
						this.codeLogin=false
						this.authCodeLogin=false
						this.pwdLogin=true
					}
					
				},
			}
		})
	</script>
	<script type="text/javascript">
		$(function(){
			//创建二维码对象
			var qrcode=new QRCode(document.getElementById("code"),{
				width:120,
				height:120
			})
			qrcode.makeCode("abcs");
		})
		
		function closeLogin(){
			alert("关闭")
			$("#loginBox").css("display","none")
		}
	</script>
</html>
